<template type="text/x-template" id="tpl-data-table">
    <div class="table-responsive">
        <table :id="id" class="table table-bordered table-hover"></table>
        <slot></slot>
    </div>
</template>
<script>
document.addEventListener("DOMContentLoaded", function () {
    Vue.component('data-table', {
        template: document.getElementById('tpl-data-table'),
        props: {
            id: {
                default: function () {
                    return "dt-" + Date.now();
                }
            },
            draw: {
                default: 1,
            },
            columns: {
                required: true
            },
            url: {
                required: true
            },
            search: { // 每列搜索
                default: function () {
                    return []
                }
            },
            conditions: { // 自定义搜索条件
                default: function () {
                    return []
                }
            },
            searching: {
                default: false
            },
            ordering: {
                default: false
            },
            autoWidth: {
                default: false
            },
            length: {
                default: 25
            }
        },
        data: function () {
            return {
                jTable: undefined
            }
        },
        watch: {
            draw: function () { // 监听是否重新绘制
                this.jTable.draw(true)
            },
            search: {
                handler: function (nV, oV) {
                    this.reSearch();
                },
                deep: true
            }
        },
        methods: {
            reSearch: function () {
                for (let it of this.search) this.jTable.column(it.col).search(it.val)
                this.jTable.draw(true)
            }
        },
        mounted: function () {
            let self = this;
            this.jTable = $(document.getElementById(this.id)).DataTable({
                autoWidth: self.autoWidth,
                serverSide: true,
                ordering: self.ordering,
                searching: self.searching,
                displayLength: self.length,
                columns: self.columns,
                ajax: {
                    url: self.url,
                    type: 'POST',
                    data: function (d) {
                        d.conditions = self.conditions
                        return d;
                    },
                    beforeSend: function (request) {
                        request.setRequestHeader("Authorization", localStorage.getItem("jwt"));
                        request.setRequestHeader("language", "#(i18n.getTag())");

                    }
                },
                language: {url: '#(CONTEXT_PATH)/common/datatable/i18n?tag=#(i18n.getTag())'}
            })
            for (let it of self.search) self.jTable.column(it.col).search(it.val) // 添加搜索条件
        }
    })
})
</script>